<template>
  <div :class="{ active: isActive }" @click="ItemClick">
    <slot name="item-icon"></slot>
  </div>
</template>
<script>
export default {
  name: "TabBar",
  props: {
    path: String,
  },
  methods: {
    ItemClick() {
      this.$router.replace(this.path);
    },
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.path) != -1;
    },
  },
};
</script>
<style scoped>
.active {
  background: #36924e;
  color: #fff;
}
</style>